<template>
  <el-col>
    <el-dialog
      title="诊断信息"
      :visible.sync="diagnoseDialog"
      :before-close="closDiagnoseDialog"
    >
      <el-form
        ref="registrationInfo"
        :model="registrationInfo"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="诊断信息" prop="diagnose">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="diagnose"
            maxlength="30"
            show-word-limit
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-row>
      <el-col :span="3">
        <el-select v-model="query.patientId" placeholder="患者名">
          <el-option
            v-for="(item, index) in patientList"
            :key="index"
            :value="item.patientId"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-date-picker
          v-model="query.startTime"
          placeholder="开始时间"
        ></el-date-picker>
        到
      </el-col>
      <el-col :span="5">
        <el-date-picker
          v-model="query.endTime"
          placeholder="结束时间"
        ></el-date-picker>
      </el-col>

      <el-col :span="2">
        <el-button @click="queryClear"> 清除 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button @click="doSelectAll"> 搜索 </el-button>
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="registrationList"
      style="width: 100%"
      row-key="registrationId"
      lazy
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="registrationId" label="挂号单 ID" />
      <el-table-column prop="doctorName" label="医生名" />
      <el-table-column prop="patientName" label="患者名" />
      <el-table-column prop="date" label="日期" />
      <el-table-column label="挂号状态">
        <el-table-column label="完成状态">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.isComplete === 0"
              >未完成</el-tag
            >
            <el-tag type="success" v-if="scope.row.isComplete === 1"
              >完成</el-tag
            >
            <el-tag type="success" v-if="scope.row.isComplete === 2"
              >诊断中</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="支付状态">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.isPayment === 0"
              >未完成</el-tag
            >
            <el-tag type="success" v-if="scope.row.isPayment === 1"
              >完成</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="预约状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isAppointment === 0">线下</el-tag>
            <el-tag type="success" v-if="scope.row.isAppointment === 1"
              >线上
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="showDiagnoseDialog(scope.row)">诊断情况</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @prev-click="currentChange"
      @next-click="currentChange"
      @current-change="currentChange"
    />
  </el-col>
</template>
  
<script>
export default {
  name: "details",
  data() {
    return {
      diagnoseDialog: false,

      registrationList: [],
      patientList: [],

      hospitalId: 0,

      page: 0,
      pageSize: 10,
      total: 0,

      multipleSelection: [],

      registrationInfo: {
        doctorId: "",
        patientId: "",
        date: "",
        isComplete: "",
        isAppointment: "",
        isPayment: "",
      },

      diagnose: "",

      query: {
        doctorId: "",
        patientId: "",
        date: "",
        isComplete: "",
        isAppointment: "",
        isPayment: "",
        startTime: "",
        endTime: "",
      },
    };
  },
  methods: {
    currentChange(index) {
      this.page = index - 1;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    queryClear() {
      this.query = {
        doctorId: "",
        patientId: "",
        isComplete: "",
        isAppointment: "",
        isPayment: "",
        startTime: "",
        endTime: "",
      };
      this.doSelectAll();
    },

    doSelectAll() {
      this.$store
        .dispatch("registration/selectAll", {
          obj: {
            doctorId: parseInt(localStorage.getItem("userId")),
            patientId: this.query.patientId != "" ? this.query.patientId : 0,
            hospitalId: this.hospitalId != "null" ? this.hospitalId : 0,
            isComplete:
              this.query.isComplete !== "" ? this.query.isComplete : null,
            isAppointment:
              this.query.isAppointment !== "" ? this.query.isAppointment : null,
            isPayment:
              this.query.isPayment !== "" ? this.query.isPayment : null,
            startTime: this.query.startTime != "" ? this.query.startTime : null,
            endTime: this.query.endTime != "" ? this.query.endTime : null,
          },
          page: this.page,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.registrationList = res.list;
          this.total = res.total;
        });
    },
    doSelectPatientId() {
      this.$store.dispatch("patient/allId", {}).then((res) => {
        this.patientList = res;
      });
    },

    showDiagnoseDialog(value) {
      this.diagnose = value.diagnose
      this.diagnoseDialog = true;
    },
    closDiagnoseDialog() {
      this.diagnoseDialog = false;
    },

    refresh() {
      this.registrationInfo = {
        name: "",
        registrationType: "",
        address: "",
        status: "",
      };
      this.doSelectAll();
      this.$refs.multipleTable.clearSelection();
    },
  },
  created() {
    this.hospitalId =
      localStorage.getItem("hospitalId") === "null"
        ? "null"
        : parseInt(localStorage.getItem("hospitalId"));
    this.doSelectAll();
    this.doSelectPatientId();
  },
};
</script>
  
<style scoped>
</style>